<template>
  <div id="boxBind">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="箱袋绑定" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="boxbind-content">
      <!-- scan med waste box -->
      <div class="scan-box" @click="toRouter">
        <div class="scan-div">
          <i class="iconfont icon-tubiaolunkuo- the-icon"></i>
        </div>
        <span>扫描医废箱</span>
      </div>
      <!--the history bind -->
      <div class="his-bind">
        <div class="his-bind-title">
          <span>历史绑定</span>
          <span>2020-08-20</span>
        </div>
        <div
          class="his-bind-content"
          v-for="(item, index) in infoList"
          :key="index"
        >
          <div class="the-content-div">
            <div class="list-div">
              <span>医废箱识别码</span>
              <span>{{ item.boxIdentify }}</span>
            </div>
            <div class="list-div">
              <span>医废箱类型</span>
              <span>{{ item.boxKinds }}</span>
            </div>
            <div class="list-div">
              <span>已绑定医废袋</span>
              <span>{{ item.bindBox }}</span>
            </div>
            <div class="list-div">
              <span>医废袋总重量</span>
              <span>{{ item.boxWeight }}</span>
            </div>
            <div class="list-div">
              <span>绑定时间</span>
              <span>{{ item.bindTime }}</span>
            </div>
            <el-divider></el-divider>
            <label>
              <van-button type="primary" size="small" style="width:80px">编辑</van-button>
              <van-button type="danger" size="small" style="width:80px">删除</van-button>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BoxBind",
  data() {
    return {
      infoList: [
        {
          boxIdentify: "YLS120486565226",
          boxKinds: "感染性废物",
          bindBox: "2个",
          boxWeight: "40Kg",
          bindTime: "2020-08-20  10：13",
        },
        {
          boxIdentify: "YLS120486565225",
          boxKinds: "感染性废物",
          bindBox: "3个",
          boxWeight: "54kg",
          bindTime: "2020-08-20  09：13",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      // this.$router.push({
      //   path: "/ScanColl",
      // });
      this.$router.go(-1)
    },
    toRouter(){
        this.$router.push({
            path:'/boxBind/boxBindInfo'
        })
    }
  },
};
</script>

<style lang="less" scoped>
.boxbind-content {
  padding: 10px;
  color: #666;
  background-color: #f2f2f2;
  .scan-box {
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #07c160;
    .scan-div {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      border: 1px solid #07c160;
      background-color: #f7f6ff;
      margin-right: 20px;
      .the-icon {
        font-size: 25px;
      }
    }
  }
  .his-bind {
    margin-top: 10px;
    font-size: 15px;
    .his-bind-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 0 10px;
      font-weight: 650;
    }
    .his-bind-content {
      height: 250px;
      margin-top: 10px;
      border-radius: 10px;
      padding: 10px;
      background-color: #ffffff;
      .the-content-div {
        height: 240px;
        border-radius: 8px;
        padding: 5px;
        background-color: #f6f8fe;
        & .list-div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        }
        & label {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
}
#boxBind .el-divider--horizontal {
  margin: 20px 0 10px 0;
}
</style>
